<!DOCTYPE html>
<html>
<head>
    <title>jQuery Animate</title>
    <script type="text/javascript" src="./jQuery/jquery-1.7.1.js"></script>
</head>
<body>
    <div id="d">
        <canvas id="canvas">No support canvas.</canvas>
        <a id="startAnimate">Start Animate</a>
    </div>
<script type="text/javascript">

    $(document).ready(function(){
       $("#startAnimate").get(0).onclick = startAnimateFunc;
//        $("#startAnimate").get(0).click(function(){
//            console.log("start animate.func")
//            $("#canvas").animate({height:300},"slow");
//            $("#canvas").animate({width:300},"slow");
//            $("#canvas").animate({height:100},"slow");
//            $("#canvas").animate({width:100},"slow");
//        })
    });

    function startAnimateFunc(){
        console.log("start animate.")
        var ctx = $("#canvas").get(0).getContext("2d");
        ctx.fillStyle = "red";
        ctx.fillRect(0,0,50,50);

        $("#canvas").animate({height:300},"slow");
        $("#canvas").animate({width:300},"slow");
        $("#canvas").animate({height:100},"slow");
        $("#canvas").animate({width:500},"slow");
    }
</script>
</body>
</html>